<template>
  <div class="text-panda-text-dark">
    <div class="line-height-32px bg-panda-dark-dark">
      <q-btn icon="close" size="sm" @click="abort_match_modify" style="width: 30px" />&nbsp;
      编辑管理
      <span class="q-mx-md">{{compute_table_item_show_name(editing_obj,'','tournamentName')}}</span>
      <span 
        class="panda-right-info-toogle-button active mr-10 mt-10" 
        style="float: right;" 
        @click="set_showrightdetail(1)"
        :class=" showrightdetail == 1 ? 'd-none':'d-block' "
      >
        <q-tooltip anchor="bottom middle" self="top middle">打开右侧信息</q-tooltip>
        <span class="panda-right-info-toogle-button-inner"></span>
      </span>

    </div>
    <div class="q-px-md">
      <div class="flex line-height-36px">
        <div class="float-left panda-edit-component-lable">联赛ID</div>
        <div class="float-left text-panda-text-light">{{editing_obj.tournamentManagerId}}</div>
      </div>

      <div class="flex line-height-36px">
        <div class="float-left panda-edit-component-lable">联赛名称</div>
        <div
          class="float-left text-panda-text-light"
        >{{ compute_table_item_show_name(editing_obj,'','tournamentName') }}</div>
      </div>

      <div class="flex line-height-36px">
        <div class="float-left panda-edit-component-lable">联赛级别</div>
        <div class="float-left text-panda-text-light">
          <q-select
            filled
            rounded
            color="panda-text-light"
            bg-color="panda-light-light"
            style="width: 200px;"
            v-model="editing_obj.tournamentLevel"
            hide-bottom-space
            :options="match_level_constant"
            emit-value
            map-options
            dense
            options-dense
            popup-content-class="bg-grey-8 text-grey-5"
          ></q-select>
        </div>
      </div>

      <div class="row q-my-md">
        <div class="panda-edit-component-lable">上传联赛Logo:</div>
        <div class="col">
          <div class="row">
            <div class="text-center" style="width:72px;">
              <div style="height:72px;">
                <img
                  :src="httpUrl_72"
                  v-if="httpUrl_72"
                  class="border-radius-10px"
                  alt
                  width="72px"
                  height="72px"
                />
              </div>
              <div class="text-panda-text-light">72*72</div>
              <span class="relative-position">
                <input
                  class="absolute z-top"
                  style="    opacity: 0;height: 21px; line-height:2px; font-size:8px;     vertical-align: bottom; max-height:21px; width:40px; max-width:40px;"
                  type="file"
                  name="inputfile1"
                  @change="upload_match_logo($event,72)"
                  ref="inputfile1"
                  accept="image/jpeg, image/gif, image/png, image/bmp"
                />
                <q-btn class="panda-btn-light-dense" label="上传" />
              </span>
            </div>
            <div class="text-center" style="width:150px;">
              <div style="height:72px; padding-top: 20px;" sts>
                <img
                  :src="httpUrl_50 "
                  v-if="httpUrl_50"
                  class="border-radius-10px"
                  alt
                  width="50px"
                  height="50px"
                />
              </div>
              <div class="text-panda-text-light">50*50</div>
              <span class="relative-position">
                <input
                  class="absolute z-top"
                  style="    opacity: 0;height: 21px; line-height:2px; font-size:8px;     vertical-align: bottom; max-height:21px; width:40px; max-width:40px;"
                  type="file"
                  name="inputfile2"
                  @change="upload_match_logo($event,50)"
                  ref="inputfile2"
                  accept="image/jpeg, image/gif, image/png, image/bmp"
                />

                <q-btn class="panda-btn-light-dense" label="上传" />
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 表格地区 -->
      <div style="min-height:100px;">
        <q-markup-table class="panda-markup-table border-radius-2px">
          <thead>
            <tr
              class="bg-panda-dark-dark text-panda-text-light line-height-30px panda-border-color border-top border-bottom"
            >
              <th class="text-left">语言</th>
              <th class="text-center" style="max-width:50%; min-width:230px;">Panda</th>
              <th
                class="text-center"
                v-for="(item,index) in editing_obj.relatedTour"
                :key="`th_${index}`"
              >{{item.dataSourceCode}}</th>
            </tr>
          </thead>
          <tbody class="bg-panda-base-dark text-panda-text-light panda-border">
            <tr
              class="bg-panda-base-dark text-panda-text-light line-height-30px panda-border-color border-bottom"
              v-for="(i, index) in language_list"
              :key="index"
            >
              <td class="text-left text-panda-text-dark">{{ i.title }}</td>
              <td class="text-center">
                <div class="row justify-center">
                  <q-input
                    filled
                    rounded
                    color="panda-text-dark"
                    bg-color="panda-light-light"
                    style="width:200px;"
                    dense
                    class="text-panda-text-dark"
                    v-model="tournamentName[i.key]"
                    placeholder
                  ></q-input>
                </div>
              </td>
              <td
                class="text-center"
                v-for="(item,index) in editing_obj.relatedTour"
                :key="`th_${index}`"
              >{{ i.key !== 'name' ? item.tournamentName[i.key] : item[i.key] }}</td>
            </tr>
          </tbody>
        </q-markup-table>
      </div>
      <div class="row q-mt-lg justify-start q-gutter-x-sm">
        <q-btn
          class="panda-btn-light-dense"
          style="width:80px;height:24px;"
          @click="submit_match_modify(2)"
          label="保存并应用"
        />
        <q-btn
          class="panda-btn-dark-dense"
          style="width:80px;height:24px;"
          @click="reset_match_modify"
          label="重置"
        />
      </div>
    </div>
  </div>
</template>

<style  scoped>
.inline-block-span {
  display: inline-block;
  width: 100px;
  
}
</style>
>

<script>
import { mapGetters, mapActions } from "vuex";
import { api_match, api_file, api_language } from "src/api/index.js";
import mixins from "src/mixins/index.js";
import alllanguage from "src/mixins/language/alllanguage.js";
import { match_resource_tabledata } from "src/mock/match/index.js";
import alertmessagemixin from "src/mixins/module/alertmessagemixin.js";
import rightinfomixin from "src/mixins/layout/rightinfo.js";

import { close, closeSync } from "fs";
export default {
  mixins: [...mixins, alllanguage, alertmessagemixin, rightinfomixin],
  data() {
    return {
      // editing_obj: {}
      httpUrl_72: "",
      httpUrl_50: "",
      filePath_72: "",
      filePath_50: "",
      editing_obj_id: "",
      title_name: "",
      tournamentName: {
        zs: "",
        en: "",
        zh: "",
        jc: ""
      },
      language_list: [],
      requseted_id:''
    };
  },
  props: {
    editing_obj: "",
    clicked_minilist_item_id:""
  },
  created() {
     this.language_list = this.get_language_list();
    this.init_all();
    
  },
  watch: {
    editing_obj(val, oldval) {
      this.language_list = this.get_language_list();
      this.init_all();
      // if(val&&val.id!=this.requseted_id!=this.clicked_minilist_item_id){
      //   this.submit_match_modify(1);
      // }
      

    }
  },
  computed: {},
  methods: {
    get_language_list() {
      // 校验是否传入为空对象
      if (this.editing_obj.tournamentName) {
        // 格式化数据为模板数组
        let obj = this.$lodash.cloneDeep(this.editing_obj);
        let arr = this.$lodash.cloneDeep(
          this.all_language_rebase(obj, "tournamentName")
        );
        // 增加简称字段
        this.tournamentName = Object.assign(
          this.tournamentName,
          obj.tournamentName
        );
        // 把关联数组的语言值赋值给this.tournamentName,有值就中断
        for (let i in this.tournamentName) {
          if (!this.tournamentName[i]) {
            for (let j = 0, len = obj.relatedTour.length; j < len; j++) {
              this.tournamentName[i] = obj.relatedTour[j].tournamentName[i];
              if (this.tournamentName[i]) {
                break;
              }
            }
          }
        }

        // 加入模板数组新字段
        // arr.splice(2, 0, { key: "name", title: "简称" });
        return arr;
      } else {
        return [];
      }
    },
    close_match_edit() {
      this.$store.dispatch("set_breadcrumbsPart4", []);
      this.$router.push({
        name: "match_resource"
      });
    },
    init_all() {
      this.editing_obj_id = this.editing_obj.id;
      this.title_name = this.editing_obj.name;
      this.init_pic_httpUrl();
      
    },
    init_pic_httpUrl() {
  
        this.httpUrl_72 = this.compute_image_src(this.editing_obj.picUrl);
        this.httpUrl_50 = this.compute_image_src(this.editing_obj.picUrlThumb);
      
    },
    upload_match_logo(event, num) {
      let inputfile = event.target.files[0];
      let formData = new FormData(); //初始化时将form Dom对象传入
      formData.append("file", inputfile);
      // formData.append("file", {});
      console.log(event);
      // 清空触发change时间
      event.target.value = ''
      // return false

      api_file.post_fastdfs_upload_file(formData).then(res => {
        // event.target.files="";
        let code = this.$lodash.get(res, "data.code");
        let data = this.$lodash.get(res, "data");
        // this.alert_message_default(res);
        console.log(data);
        if (num == 72) {
          this.httpUrl_72 = this.compute_image_src(data.filePath);
          this.filePath_72 = data.filePath;
        } else {
          this.httpUrl_50 = this.compute_image_src(data.filePath);
          this.filePath_50 = data.filePath;
        }
      });
    },
    abort_match_modify() {
      this.close_match_edit();
    },
    reset_match_modify() {
      this.language_list = this.get_language_list();
      this.init_all();
    },

    submit_match_modify(num) {
      /**
       * 因为  存在 多组件 之间传值  监听问题
       * 这里  存在 反哺 问题 一次 提交 两次改变  在 奇数次改变 提交后台， 偶数次 不调用后台 并且 第一次 不显示提示消息
       * 而且  存在 快速点击左侧 列表 需要  重置 中间 序列问题
       *
       *
       *
       * */

      this.$emit("minilist_item_can_click_change", 0);

      let params = {
        id: this.editing_obj.id,
        tournamentLevel: this.editing_obj.tournamentLevel,
        nameCode: this.editing_obj.nameCode,
        text: {
          ...this.tournamentName
        }
      };
      delete params.text.name;
      if (this.filePath_72) {
        params.picUrl = this.filePath_72;
      }
      if (this.filePath_50) {
        params.picUrlThumb = this.filePath_50;
      }

      params.sportId = this.selectedSportTypeInfo["id"];

      api_match.post_tournament_edit(params).then(res => {
        this.requseted_id= params.id
 
        if (num == 2) {
          this.alert_message_default(res);
        }
        this.$emit("minilist_item_can_click_change", 1);
        let code = this.$lodash.get(res, "data.code");
        if (code == 200) {
          // 通知刷新
          this.$emit("minilist_need_refresh", 1, this.editing_obj_id);
          this.$nextTick(() => {
            this.$emit("minilist_need_refresh", 0);
          });
        }
      });
    }
  }
};
</script>
